<template>
  <div>{{ cityText }}</div>
</template>
<script>
import { getListByParentId0, getListByParentId1 } from "../../api";
export default {
  props: {
    content: {
      type: String,
      default: ""
    }
  },

  watch: {
    content: {
      handler(val) {
        if (val) {
          this.getAddressCode1();
        }
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      cityText: null
    };
  },
  methods: {
    getAddressCode1() {
      this.$nextTick(async () => {
        this.cityText = await this.getAddressCode(this.content).then((res) => {
          return res;
        });
      });
    },
    async getAddressCode(val) {
      if (val) {
        const arr = val.split(",");
        let city = "";
        let city1 = "";
        let city2 = "";
        if (arr.length === 2 || arr.length === 3) {
          try {
            const res = await getListByParentId0();
            city = res.data.find((z) => z.id === Number(arr[0])).name;
            const ress = await getListByParentId1(Number(arr[0]));
            city1 = ress.data.find((z) => z.id === Number(arr[1])).name;
            if (arr.length === 3) {
              const resss = await getListByParentId1(Number(arr[1]));
              city2 = resss.data.find((z) => z.id === Number(arr[2])).name;
              return `${city},${city1},${city2}`;
            } else {
              return `${city},${city1}`;
            }
          } catch (e) {
            console.log(e);
          }
        } else {
          const res = await getListByParentId0();
          city = res.data.find((z) => z.id === Number(arr[0])).name;
          return `${city}`;
        }
      } else {
        return "";
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.textLine {
  color: #767885;
  font-size: 14px;
  margin: 14px 0;
}
.textLineRig {
  width: 446px;
  vertical-align: middle;
  display: inline-block;
}
.textLineLeft {
  display: inline-block;
}
.Attachment {
  font-weight: 500;
  color: #3c3d43;
  font-size: 16px;
}
.textLineRigIMg {
  width: 144px;
  height: 108px;
  border-radius: 4px;
  padding-right: 8px;
  display: inline-block;
}
.skillBox {
  height: 22px;
  line-height: 22px;
  padding: 0 8px;
  margin-right: 8px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
</style>
